<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">词典</span>
			</div>
		</div>
		<div class="con">
			<div>
				<el-button @click="dialogVisible = true">添加一级目录</el-button>
				<!--<el-input v-model="input" placeholder="请输入项目名称查找" style="width:400px"></el-input>-->
			</div>
			<div style="margin-top:20px;overflow: auto;padding-bottom: 100px;">
				<el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id" :expand-on-click-node="false" :render-content="renderContent">
				</el-tree>
			</div>
		</div>
		<el-dialog
		  title="添加一级目录"
		  :visible.sync="dialogVisible"
		  width="600px"
		  :before-close="handleClose">
		  <el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="词典名字">
			    <el-input v-model="form.DiName"></el-input>
			  </el-form-item>
			  <el-form-item label="词典内容">
			    <el-input v-model="form.DictVal"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
			    <el-input v-model="form.memo"></el-input>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dictadd()">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="添加子级"
		  :visible.sync="mark"
		  width="600px"
		  :before-close="handleClose">
		  <el-form ref="form1" :model="form" label-width="80px">
			  <el-form-item label="词典名字">
			    <el-input v-model="form1.DiName"></el-input>
			  </el-form-item>
			  <el-form-item label="词典内容">
			    <el-input v-model="form1.DictVal"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
			    <el-input v-model="form1.memo"></el-input>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="mark = false">取 消</el-button>
		    <el-button type="primary" @click="tjzj()">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="修改"
		  :visible.sync="mark1"
		  width="600px"
		  :before-close="handleClose">
		  <el-form ref="form1" :model="form2" label-width="80px">
			  <el-form-item label="词典名字">
			    <el-input v-model="form2.DiName"></el-input>
			  </el-form-item>
			  <el-form-item label="词典内容">
			    <el-input v-model="form2.DictVal"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
			    <el-input v-model="form2.memo"></el-input>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="mark1 = false">取 消</el-button>
		    <el-button type="primary" @click="xgcd()">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="词典管理"
		  :visible.sync="mark2"
		  width="600px"
		  :before-close="handleClose">
		  <h1>是否删除词典</h1>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="mark2 = false">取 消</el-button>
		    <el-button type="primary" @click="del()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	let id = 1000;
	import api from '../../kits/api.js';
	export default {
		name: 'dictionary',
		data() {
			return {
				loading:true,
				mark2:false,
				mark1:false,
				form2:{//词典详细
					DiName:"",
					DictVal:"",
					memo:"",
				},
				mark:false,
				form1:{//词典详细
					DiName:"",
					DictVal:"",
					memo:"",
				},
				form:{//词典详细
					DiName:"",
					DictVal:"",
					memo:"",
				},
				dialogVisible: false,
				input: '',
				data4: [],//数据
				defaultProps: { //默认名字
					children: 'Children',
					label: 'DictName',
					id:'ID',
					memo:"Memo",
				},
				id:"",//全局id
			}
		},
		created(){
			this.dictlist()
		},
		methods: {
			handleClose(done) {
		        this.$confirm('确认关闭？')
		          .then(_ => {
		            done();
		          })
		          .catch(_ => {});
		     },
		     //添加词典弹框
			append(data) {
				this.id = data.ID
				this.mark = true
			},

			remove(node, data) {
				this.id = data.ID
				this.mark2 = true
			},
			//修改词典弹框
			modify(node, data,store){
				this.id = data.ID
				var len = data.DictName.length - data.Memo.length
				this.form2.DictVal = data.DictValue
				this.form2.DiName = data.DictName.substring(0,len)
				this.form2.memo = data.Memo
				this.mark1 = true
			},
			//渲染
			renderContent(h, {
				node,
				data,
				store
			}) {
				return(
					<span style="flex: 1; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
		            <span>
		              <span>{node.label}</span>
		            </span>
		            <span style="float:right; margin-right:15px">
		              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>新增子级</el-button>
		              <el-button style="font-size: 12px;" type="text" on-click={ () => this.modify(node, data,store) }>修改</el-button>
		              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
		            </span>
          		</span>);
			},
			//获取词典
			dictlist(){
				var me = this
				this.loading = true
				this.$axios.get(api.dictlist+'/'+0).then((res)=> {
				  	if(res.data.isOK){
				  		this.loading = false
				  		me.data4 = res.data.data
				  		for(var i = 0;i<me.data4.length;i++){
				  			if(me.data4[i].Memo == 'null'||me.data4[i].Memo == '' || me.data4[i].Memo == null){
				  				me.data4[i].DictName = me.data4[i].DictName
				  			}else{
					  			me.data4[i].DictName = me.data4[i].DictName + ' ' + me.data4[i].Memo
				  			}
				  		}
				  	}else{
				  		if(res.data.msg == "Token无效" || res.data.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.$message.error(res.data.msg);
						}	
				  	}
            	});
			},
			//新建词典
			dictadd(){
				this.loading = true
				this.$axios.post(api.dictadd,{
					  "ID": "",
					  "ParentID": 0,
					  "DictName": this.form.DiName,
					  "DictValue": this.form.DictVal,
					  "Memo": this.form.memo,
					  "CreateMan": "",
					  "CreateDate": "",
					  "IsSYS": false
				}).then((res)=> {
				  	if(res.data.isOK){
				  		this.loading = false
				  		this.dictlist()
				  		this.dialogVisible = false;
				  		this.form.DiName="";
				  		this.form.memo="";
				  		this.form.DictVal="";
				  	}else{
				  		if(res.data.msg == "Token无效" || res.data.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.$message.error(res.data.msg);
						}	
				  	}
            	});
			},
			//添加子级词典
			tjzj(){
				this.loading = true
				this.$axios.post(api.dictadd,{
					  "ID": "",
					  "ParentID": this.id,
					  "DictName": this.form1.DiName,
					  "DictValue": this.form1.DictVal,
					  "Memo": this.form1.memo,
					  "CreateMan": "",
					  "CreateDate": "",
					  "IsSYS": false
				}).then((res)=> {
				  	if(res.data.isOK){
				  		this.loading = false
				  		this.dictlist()
				  		this.mark = false;
				  		this.form1.DiName="";
				  		this.form1.memo="";
				  		this.form1.DictVal="";
				  	}else{
				  		if(res.data.msg == "Token无效" || res.data.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.$message.error(res.data.msg);
						}	
				  	}
            	});
			},
			//修改词典
			xgcd(){
				this.loading = true
				this.$axios.post(api.dictedit,{
					  "ID": this.id,
					  "ParentID": "",
					  "DictName": this.form2.DiName,
					  "DictValue": this.form2.DictVal,
					  "Memo": this.form2.memo,
					  "CreateMan": "",
					  "CreateDate": "",
					  "IsSYS": false
				}).then((res)=> {
				  	if(res.data.isOK){
				  		this.loading = false
				  		this.dictlist()
				  		this.mark1 = false;
				  		this.form2.DiName="";
				  		this.form2.memo="";
				  		this.form2.DictVal="";
				  	}else{
				  		if(res.data.msg == "Token无效" || res.data.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.$message.error(res.data.msg);
						}	
				  	}
            	});
			},
			//删除词典
			del(){
				this.loading = true
				this.$axios.get(api.dictdel+'/'+this.id).then((res)=> {
				  	if(res.data.isOK){
				  		this.loading = false
				  		this.dictlist()
				  		this.mark2 = false;
				  	}else{
				  		if(res.data.msg == "Token无效" || res.data.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.$message.error(res.data.msg);
						}	
				  	}
            	});
			}
		}

	}
</script>

<style>
	.title1 {
		width: 100%;
		padding: 15px 0;
		background: #fff;
		text-indent: 20px;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	
	.con {
		width: 100%;
		margin-top: 10px;
	}
	.el-dialog--small{
		width: 600px;
	}
</style>